/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {StyleSheet, Text, View, Dimensions, Image,Platform} from 'react-native';

import Common from '../../component/common';

const totalWidth = Dimensions.get('window').width;
const os = Platform.OS;

export default class MediaData extends Component {
  render() {
    var data = this.props.data;
    var today = Common.toTransformation(data.totalTodayStatisticsCount,1);
    return (
      <View style={styles.allmedia}>
        <View style={styles.mediaCountTitle}>
          <Text style={styles.mediaCountTT}>全网播放数据</Text>
        </View>
        <View style={styles.mediaCount}>
          <View style={styles.mediaCountW}>
            <View style={[styles.mediaCountItem,{paddingHorizontal: 5,backgroundColor: '#ffeeee',flexDirection: 'row',height: totalWidth*0.074,borderRadius: totalWidth*0.037,marginTop: 10}]}>
              <View style={styles.mediaCountItemC}>
                <Text style={[styles.mediaCountItemCL,{fontSize:20,lineHeight: 20, color: '#ff5757'}]}>{today.value}<Text style={styles.unitF}>{today.unit}</Text></Text>
              </View>
              <View style={styles.mediaCountItemC}>
                <Text style={[styles.mediaCountItemLL,styles.todayReport,{fontSize: 11,color: '#ff5757'}]}>今日播放量</Text>
              </View>
            </View>
            <View style={styles.mediaCountItem}>
              <View style={styles.mediaCountItemC}>
                <Text style={styles.mediaCountItemCL}>{Common.toTransformation(data.totalYesterdayStatisticsCount,1).value}<Text style={styles.unitF}>{Common.toTransformation(data.totalYesterdayStatisticsCount,1).unit}</Text></Text>
              </View>
              <View style={styles.mediaCountItemC}>
                <Text style={styles.mediaCountItemLL}>昨日播放量</Text>
              </View>
            </View>
            <View style={styles.mediaCountItem}>
              <View style={styles.mediaCountItemC}>
                <Text style={styles.mediaCountItemCL}>{Common.toTransformation(data.totalWeekStatisticsCount,1).value}<Text style={styles.unitF}>{Common.toTransformation(data.totalWeekStatisticsCount,1).unit}</Text></Text>
              </View>
              <View style={styles.mediaCountItemC}>
                <Text style={styles.mediaCountItemLL}>七日播放量</Text>
              </View>
            </View>
            <View style={styles.mediaCountItem}>
              <View style={styles.mediaCountItemC}>
                <Text style={styles.mediaCountItemCL}>{Common.toTransformation(data.totalStatisticsCount,1).value}<Text style={styles.unitF}>{Common.toTransformation(data.totalStatisticsCount,1).unit}</Text></Text>
              </View>
              <View style={styles.mediaCountItemC}>
                <Text style={styles.mediaCountItemLL}>累计播放量</Text>
              </View>
            </View>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f6f6f6',
  },
  page: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  allmedia: { 
    flex: 2,

  },
  mediaCountTitle: {
    height: totalWidth*0.104,
    backgroundColor: '#ff5757',
    alignItems: 'center',
    justifyContent: 'center',
    borderTopLeftRadius: 5,
  },
  mediaCountTT: {
    color: '#fff',
  },
  mediaCount: {

  },
  mediaCountW: {
    paddingHorizontal: 10,
    justifyContent: 'center'
  },
  mediaCountItem: {
    flexDirection: 'row',
    paddingVertical: totalWidth*0.02,
    alignItems: 'center',
  },
  todayReport:{
  	
  },
  mediaCountItemT: {
    color: '#ffffff',
    fontSize: 18,
    textAlign: 'center',
    
  },
  mediaCountItemC: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  mediaCountItemCP: {
    width: totalWidth*0.133,
    height: totalWidth*0.149,
    resizeMode: 'contain',
    backgroundColor: "transparent",
    justifyContent: 'center',
    alignItems: 'center',
  },
  mediaCountItemCL: {
    color: '#ff5756',
    fontSize: 18,
    textAlign: 'center',
    
  },
  mediaCountItemLL: {
    color: '#000000',
    fontSize: 12,
  },
  unitF: {
    fontSize: 10,
  }
});
